<script setup>
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;
// 轮播图
const titleNViewBackground = ref('');
const carouselList = ref([
    {
        src: '/static/temp/ad_xiangguo.jpeg',
        background: 'rgb(203, 87, 60)'
    },
    {
        src: '/static/temp/ad_xianguo2.jpeg',
        background: 'rgb(205, 215, 218)'
    }
]);
const swiperCurrent = ref(0);
const swiperLength = ref(2);
const swiperChange = (e) => {
    const index = e.detail.current;
    swiperCurrent.value = index;
};
const navToDetailPage = () => {
    //测试数据没有写id，用title代替
    let id = '1';
    uni.navigateTo({
        url: '/pages/product/product'
    });
};

const activeIndex = ref(0);
const onChange = (e) => {
    console.log(e.detail.current);
    activeIndex.value = e.detail.current;
};
</script>

<template>
    <view class="carousel-section">
        <swiper class="carousel" circular @change="swiperChange" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage()">
                <image :src="item.src" />
            </swiper-item>
        </swiper>
        <!-- 自定义swiper指示器 -->
        <view class="swiper-dots">
            <text class="num">{{ swiperCurrent + 1 }}</text>
            <text class="sign">/</text>
            <text class="num">{{ swiperLength }}</text>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.carousel-section {
    position: relative;
    padding-top: 10px;

    .titleNview-placing {
        height: var(--status-bar-height);
        padding-top: 44px;
        box-sizing: content-box;
    }

    .titleNview-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 426rpx;
        transition: 0.4s;
    }
}
.carousel {
    width: 100%;
    height: 350rpx;

    .carousel-item {
        width: 100%;
        height: 100%;
        padding: 0 28rpx;
        overflow: hidden;
    }

    image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
    }
}
.swiper-dots {
    display: flex;
    position: absolute;
    left: 60rpx;
    bottom: 15rpx;
    width: 72rpx;
    height: 36rpx;
    background-image: url();
    background-size: 100% 100%;

    .num {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50px;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 36rpx;
    }

    .sign {
        position: absolute;
        top: 0;
        left: 50%;
        line-height: 36rpx;
        font-size: 12rpx;
        color: #fff;
        transform: translateX(-50%);
    }
}
</style>
